import React, { PureComponent } from 'react';

class MsgImage extends PureComponent {
  state = {
    imageLoading0:true,
    imageLoading1:true,
    imageLoading2:true,
    imageLoading3:true,
    imageLoading4:true,
    imageLoading5:true,
    imageLoading6:true,
    imageLoading7:true,
    imageLoading8:true,
    imgStyle0:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle1:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle2:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle3:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle4:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle5:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle6:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle7:{width:20,height:20,marginLeft:25,cursor:"pointer"},
    imgStyle8:{width:20,height:20,marginLeft:25,cursor:"pointer"}
  };

  changeLoading(index){
    if(index == 0) {
      this.setState({
        imageLoading0:false,
        imgStyle0:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    } else if(index == 1) {
      this.setState({
        imageLoading1:false,
        imgStyle1:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 2) {
      this.setState({
        imageLoading2:false,
        imgStyle2:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 3) {
      this.setState({
        imageLoading3:false,
        imgStyle3:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 4) {
      this.setState({
        imageLoading4:false,
        imgStyle4:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 5) {
      this.setState({
        imageLoading5:false,
        imgStyle5:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 6) {
      this.setState({
        imageLoading6:false,
        imgStyle6:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 7) {
      this.setState({
        imageLoading7:false,
        imgStyle7:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }else if(index == 8) {
      this.setState({
        imageLoading8:false,
        imgStyle8:{width:60,height:60,marginLeft:5,cursor:"pointer"}
      })
    }
  }

  render() {
    const { imageSrc } = this.props;
    if (imageSrc == undefined || imageSrc==""){
      return (
        <div >

        </div>
      );
    }
     const imgArr = imageSrc.replace("[","").replace("]","").replace(/"/g,"").split(",");
    const imagArrLength = imgArr.length;
    if(imagArrLength == 0){
      return (
        <div >

        </div>
      );
    }else if(imagArrLength == 1){
      return (
        <div >
          <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
        </div>
      );
    }else if(imagArrLength == 2){
      return (
        <div >
          <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
        </div>
      );
    }else if(imagArrLength == 3){
      return (
        <div >
          <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
          <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
        </div>
      );
    }else if(imagArrLength == 4){
      return (
        <div >
          <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
          <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
          <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
        </div>
      );
    }else if(imagArrLength == 5){
      return (
        <div >
          <div >
            <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img onLoad={()=>this.changeLoading(4)} src={this.state.imageLoading4?require('../../../../public/loading.gif'):imgArr[4]} style={this.state.imgStyle4}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 6){
      return (
        <div >
          <div >
            <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img onLoad={()=>this.changeLoading(4)} src={this.state.imageLoading4?require('../../../../public/loading.gif'):imgArr[4]} style={this.state.imgStyle4}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img onLoad={()=>this.changeLoading(5)} src={this.state.imageLoading5?require('../../../../public/loading.gif'):imgArr[5]} style={this.state.imgStyle5}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 7){
      return (
        <div >
          <div >
            <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img onLoad={()=>this.changeLoading(4)} src={this.state.imageLoading4?require('../../../../public/loading.gif'):imgArr[4]} style={this.state.imgStyle4}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img onLoad={()=>this.changeLoading(5)} src={this.state.imageLoading5?require('../../../../public/loading.gif'):imgArr[5]} style={this.state.imgStyle5}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(6)} src={this.state.imageLoading6?require('../../../../public/loading.gif'):imgArr[6]} style={this.state.imgStyle6}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 8){
      return (
        <div >
          <div >
            <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
            <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(4)} src={this.state.imageLoading4?require('../../../../public/loading.gif'):imgArr[4]} style={this.state.imgStyle4}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img onLoad={()=>this.changeLoading(5)} src={this.state.imageLoading5?require('../../../../public/loading.gif'):imgArr[5]} style={this.state.imgStyle5}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
            <img onLoad={()=>this.changeLoading(6)} src={this.state.imageLoading6?require('../../../../public/loading.gif'):imgArr[6]} style={this.state.imgStyle6}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
            <img onLoad={()=>this.changeLoading(7)} src={this.state.imageLoading7?require('../../../../public/loading.gif'):imgArr[7]} style={this.state.imgStyle7}  onClick={() => this.props.handleImagePlay(imgArr[7]) } />
          </div>
        </div>
      );
    }else if(imagArrLength == 9){
      return (
        <div >
          <div >
            <img onLoad={()=>this.changeLoading(0)} src={this.state.imageLoading0?require('../../../../public/loading.gif'):imgArr[0]} style={this.state.imgStyle0}  onClick={() => this.props.handleImagePlay(imgArr[0]) } />
            <img onLoad={()=>this.changeLoading(1)} src={this.state.imageLoading1?require('../../../../public/loading.gif'):imgArr[1]} style={this.state.imgStyle1}  onClick={() => this.props.handleImagePlay(imgArr[1]) } />
            <img onLoad={()=>this.changeLoading(2)} src={this.state.imageLoading2?require('../../../../public/loading.gif'):imgArr[2]} style={this.state.imgStyle2}  onClick={() => this.props.handleImagePlay(imgArr[2]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(3)} src={this.state.imageLoading3?require('../../../../public/loading.gif'):imgArr[3]} style={this.state.imgStyle3}  onClick={() => this.props.handleImagePlay(imgArr[3]) } />
            <img onLoad={()=>this.changeLoading(4)} src={this.state.imageLoading4?require('../../../../public/loading.gif'):imgArr[4]} style={this.state.imgStyle4}  onClick={() => this.props.handleImagePlay(imgArr[4]) } />
            <img onLoad={()=>this.changeLoading(5)} src={this.state.imageLoading5?require('../../../../public/loading.gif'):imgArr[5]} style={this.state.imgStyle5}  onClick={() => this.props.handleImagePlay(imgArr[5]) } />
          </div>
          <div >
            <img onLoad={()=>this.changeLoading(6)} src={this.state.imageLoading6?require('../../../../public/loading.gif'):imgArr[6]} style={this.state.imgStyle6}  onClick={() => this.props.handleImagePlay(imgArr[6]) } />
            <img onLoad={()=>this.changeLoading(7)} src={this.state.imageLoading7?require('../../../../public/loading.gif'):imgArr[7]} style={this.state.imgStyle7}  onClick={() => this.props.handleImagePlay(imgArr[7]) } />
            <img onLoad={()=>this.changeLoading(8)} src={this.state.imageLoading8?require('../../../../public/loading.gif'):imgArr[8]} style={this.state.imgStyle8}  onClick={() => this.props.handleImagePlay(imgArr[8]) } />
          </div>
        </div>
      );
    }
  }
}

export default MsgImage;
